<template>
  <div>
    <div class="main_operation">
      <div class="operation_right">
        <a-input
          placeholder="请输入公司名称"
          style="width: 200px;margin-right:5px"
          v-model="formList.company_name"
        />
        <a-select
          allowClear
          class="mr5"
          style="width: 200px"
          v-model="formList.equipment_id"
          placeholder="设备名称"
        >
          <a-select-option
            v-for="item in equipmentData"
            :value="item.id"
            :key="item.id"
          >{{item.name}}</a-select-option>
        </a-select>
        <a-select
          allowClear
          class="mr5"
          style="width: 200px"
          v-model="formList.pay_type"
          placeholder="支付方式"
        >
          <a-select-option :value="1">微信支付</a-select-option>
          <a-select-option :value="2">线上支付</a-select-option>
        </a-select>
        <a-range-picker style="width: 220px" class="mr5" @change="onDateChange" />
        <a-button class="mr10" type="primary" @click="()=>{formList.page = 1;changeData()}">搜索</a-button>
        <!-- <a-range-picker style="width: 220px" class="mr5" @change="onDateChange" /> -->
        <!-- <a-select v-model="state" class="mr10" @change="onSearch" style="width: 200px;margin-left:42px">
                    <a-select-option :value="0">全部</a-select-option>
                    <a-select-option :value="1">已支付</a-select-option>
                    <a-select-option :value="2">待支付</a-select-option>
                    <a-select-option :value="3">待续费</a-select-option>
        </a-select>-->
      </div>
    </div>
    <div class="main">
      <a-table
        :pagination="false"
        :loading="tableLoad"
        :columns="Fields"
        :dataSource="dataLists.data"
        :rowKey="record => record.id"
      >
        <!-- :scroll="{x: 890, y: 500 }" -->
        <template slot="action" slot-scope="text, record">
            <a-button v-if="record.invoice_id == null && record.pay_status == 1 && routerShow($route,'invoice_add')" type="primary" class="mt5" size="small" @click="invoiceBtn(record)">开票申请</a-button>
            <a-button v-if="record.invoice_id != null && record.pay_status == 1 && routerShow($route,'invoice_add')" disabled type="primary" class="mt5" size="small">发票已申请</a-button>
        </template>
      </a-table>
      <div class="pageBox">
        <a-pagination
          :total="dataLists.total"
          :showTotal="total => `共 ${total} 条数据`"
          :pageSize="dataLists.per_page"
          :defaultCurrent="1"
          @change="pageChange"
        />
      </div>
      <a-modal title="开票申请" :width="600" :maskClosable="false" destroyOnClose v-model="invoiceModel" @ok="invoiceOk" :confirmLoading="confirmLoading" @cancel="invoiceCancel">
            <a-form>
                <h3 class="modelTitle">发票信息</h3>
                <a-form-item required label="发票类型:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-select v-model="invoiceForm.invoices_type">
                        <a-select-option value="ordinary">普票</a-select-option>
                        <a-select-option value="special">专票</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="抬头:" required :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-input v-model="invoiceForm.invoices_name" placeholder="请输入发票抬头" />
                </a-form-item>
                <a-form-item required label="纳税人识别号:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-input v-model="invoiceForm.identification" placeholder="请输入纳税人识别号" />
                </a-form-item>
                <template v-if="invoiceForm.invoices_type == 'special'">
                    <a-form-item required label="注册电话:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                        <a-input v-model="invoiceForm.telephone" placeholder="请输入注册电话" />
                    </a-form-item>
                    <a-form-item required label="开户银行:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                        <a-input v-model="invoiceForm.bank_name" placeholder="请输入开户银行" />
                    </a-form-item>
                    <a-form-item required label="银行帐户:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                        <a-input v-model="invoiceForm.bank_account" placeholder="请输入银行帐户" />
                    </a-form-item>
                </template>
                <h3 class="modelTitle">快递信息</h3>
                <a-form-item required label="收件人:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-input v-model="invoiceForm.name" placeholder="请输入收件人" />
                </a-form-item>
                <a-form-item required label="所在地区:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-cascader v-model="RegionName" :options="RegionData" @change="onRegionChange" :fieldNames="{ label: 'name', value: 'name', children: 'children' }" placeholder="请选择所在地区" />
                </a-form-item>
                <a-form-item required label="详细地址:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-input v-model="invoiceForm.address" placeholder="请输入详细地址" />
                </a-form-item>
                <a-form-item required label="联系电话:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-input v-model="invoiceForm.mobile" placeholder="请输入联系电话" />
                </a-form-item>
                <a-form-item label="邮政编号:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-input v-model="invoiceForm.zip" placeholder="请输入邮政编号" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "payRecord",
  data() {
    return {
      // 列表
      state: 0,
      tableLoad: false, // 列表loading状态
      formList: {
        // 列表信息
        page: 1
      },
      //开票申请
      confirmLoading: false, // 按钮loading状态
      invoiceModel: false, // 开票
      RegionName: [], // 地区
      invoiceForm: {
        // oid: '',
        // user_id: '',
        // invoices_type: 'ordinary',
        // invoices_name: '',
        // identification: '',
        // name: '',
        // area: '',
        // address: '',
        // mobile: '',
        // zip: '',
      },
    };
  },
  computed: {
    ...mapState({
      Fields: state => state.paymentRecord.payRecordFields,
      dataLists: state => state.paymentRecord.payRecordDataLists,
      requestCode: state => state.paymentRecharge.requestCode,
      equipmentData: state => state.equipment.equipmentData,
      RegionData: state => state.paymentRecharge.RegionData,
    })
  },
  mounted() {
    this.region();
    this.equipmentAll();
    if (this.$route.params.equId != undefined) {
      this.formList.equipment_id = Number(this.$route.params.equId);
    }
    this.changeData();
  },
  methods: {
    // 日期
    onDateChange(date, dateStrings) {
      console.log(date, dateStrings);
      this.formList.created_start = dateStrings[0];
      this.formList.created_end = dateStrings[1];
      if (!date.length) {
        delete this.formList.created_start;
        delete this.formList.created_end;
      }
    },
    ...mapActions({
      getLists: "paymentRecord/getPayRecordLists", // 列表
      equipmentAll: "equipment/equipmentAll", // 所有设备名称
      invoice: 'paymentRecharge/invoice', // 开票
      region: 'paymentRecharge/region', // 城市联动
    }),
    /* 通用模块 */
    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onSearch(type) {
      if (type == "reset") {
        this.formList = {
          page: 1
        };
      } else {
        this.formList.page = 1;
      }
      this.changeData();
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 1000);
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    /* 通用模块end */
    // 开票按钮
    invoiceBtn(item) {
      console.log(item);
      this.RegionName = [];
      this.invoiceForm = {
        oid: item.trade_no,
        user_id: item.user_id,
        invoices_type: 'ordinary',
        invoices_name: '',
        identification: '',
        name: '',
        area: '',
        address: '',
        mobile: '',
        zip: '',
      },
      this.invoiceModel = true;
    },
    // 确定开票
    invoiceOk() {
      // console.log(this.invoiceForm);
      this.confirmLoading = true;
      this.invoice(this.invoiceForm);
      setTimeout(() => {
        // console.log(this.requestCode);
        if (this.requestCode === 0) {
          this.invoiceModel = false;
          this.changeData();
        }
        this.confirmLoading = false;
      }, 1000);
      this.invoiceModel = false;
    },
    invoiceCancel() {
      this.invoiceModel = false;
    },
    // 地区选择
    onRegionChange(value, selectedOptions) {
      this.invoiceForm.area = value.join(' ');
      console.log(this.invoiceForm);
    },
  }
};
</script>

<style scoped>
</style>
